<script setup name="informlist">
import { ref, reactive, onMounted, watch } from "vue"
import OAMain from "@/components/OAMain.vue";
import OADialog from "@/components/OADialog.vue";
import OAPagination from "@/components/OAPagination.vue";
import timeFormatter from "@/utils/timeFormatter"
import { useAuthStore } from "@/stores/auth";
import informHttp from "@/api/informHttp";
import { ElMessage } from "element-plus";

const authStore = useAuthStore()

let informs = ref([])
let pagination = reactive({
    page: 1,
    total: 0
})
let dialogVisible = ref(false)
let handleIndex = 0
let number = 1


// 分页
// 封装请求数据的函数
const requestAbsent = async (page) => {
    try {
        // 这里 page 是传进来的页码
        const data = await informHttp.getInformList(page)
        // 假设后端返回的是 { count: 100, next: '', previous: '', results: [...] }
        pagination.total = data.count
        informs.value = data.results
    } catch (error) {
        ElMessage.error('加载失败: ' + error.message)
    }
}

// 页面加载完成后请求第一页数据
onMounted(async () => {
    await requestAbsent(pagination.page)
})

// 监听页码变化，比如点击下一页时
watch(() => pagination.page, (newPage) => {
    requestAbsent(newPage)
})



// onMounted(async () => {
//     try {
//         let data = await informHttp.getInformList(1)
//         // data = {count: 10, next: , previous: , results: []}
//         pagination.total = data.count
//         informs.value = data.results
//         console.log(data.results);
//     } catch (detail) {
//         ElMessage.error(detail)
//     }
// })

// 监听 page 只要 page 的值发生变化 就向服务器要数据
// watch(()=>pagination.page,(value)=>{
//     requestAbsent(value)
// })

// 分页

const onShowDialog = (index) => {
    handleIndex = index
    dialogVisible.value = true;
}

const onDeleteInform = async () => {
    try {
        let inform = informs.value[handleIndex]
        await informHttp.deleteInform(inform.id)
        informs.value.splice(handleIndex, 1)
        dialogVisible.value = false;
        ElMessage.success("通知删除成功！")
    } catch (detail) {
        ElMessage.error(detail)
    }
}

</script>

<template>
    <OADialog v-model="dialogVisible" title="提示" @submit="onDeleteInform">
        <span>您确定要删除这篇通知吗？</span>
    </OADialog>
    <OAMain title="通知列表">
        <el-card>
            <el-table :data="informs">
                <el-table-column label="标题">
                    <template #default="scope">
                        <RouterLink :to="{ name: 'inform_detail', params: { pk: scope.row.id } }">{{ scope.row.title }}</RouterLink>
                    </template>
                </el-table-column>
                <el-table-column label="发布者">
                    <template #default="scope">
                        {{ '[' + scope.row.author.department.name + ']' + scope.row.author.realname }}
                    </template>
                </el-table-column>
                <el-table-column label="发布时间">
                    <template #default="scope">
                        {{ timeFormatter.stringFromDateTime(scope.row.create_time) }}
                    </template>
                </el-table-column>
                <el-table-column label="部门可见">
                    <template #default="scope">
                        <el-tag v-if="scope.row.public" type="success">公开</el-tag>
                        <el-tag v-else v-for="department in scope.row.department" :key="department.name" type="info">{{
                            department.name }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button v-if="scope.row.author.uid == authStore.user.uid" @click="onShowDialog(scope.$index)"
                            type="danger" icon="Delete" />
                        <el-button v-else disabled type="default">无</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <OAPagination v-model="pagination.page" :total="pagination.total"></OAPagination>
            </template>
        </el-card>
    </OAMain>
</template>

<style scoped>
.el-badge {
    margin-right: 4px;
    margin-top: 4px;
}
</style>